<template>
  <div class="distributor-card" :class="{ 'inactive': distributor.status === 'inactive' }">
    <div class="distributor-card__header">
      <!-- <div class="distributor-card__avatar">
        <img :src="distributor.avatar" :alt="distributor.name">
        <span class="status-badge" :class="statusClass" :title="statusTitle"></span>
      </div> -->

      <div class="distributor-card__info">
        <h3 class="distributor-card__name">{{ distributor.user_name }}</h3>

        <span class="distributor-card__id">ID: {{ distributor.id }}</span>
        <span class="distributor-card__id">账号: {{ distributor.phone }}</span>

        <div class="commission-rate">
          <i class="fas fa-percentage"></i>
          <span>{{ distributor.userConfigWithOne ? (distributor.userConfigWithOne.commission_rate*100).toFixed(0) : 0 }}% 佣金比例</span>
        </div>
      </div>
    </div>

    <div class="distributor-card__metrics">
      <div class="metric">
        <div class="metric__label">总销售额</div>
        <div class="metric__value">{{ formatMoney(distributor.getNumMoney) }}</div>
      </div>
      <div class="metric">
        <div class="metric__label">订单数</div>
        <div class="metric__value">{{ distributor.getCountMoney }}</div>
      </div>
      <div class="metric">
        <div class="metric__label">累计佣金</div>
        <div class="metric__value">{{ formatMoney(distributor.getCommissionMoney) }}</div>
      </div>
    </div>

    <div class="distributor-card__footer">
      <div class="join-date">
        <i class="fas fa-calendar-alt"></i>
        <span>加入于 {{ distributor.create_time }}</span>
      </div>

      <div class="distributor-card__actions">
        <!-- <button class="action-btn view-btn" @click="handleView" title="查看详情">
          <i class="fas fa-eye"></i>
        </button> -->

        <button class="action-btn edit-btn" @click="handleEdit" title="编辑信息">
          <i class="fas fa-edit"></i>
        </button>
        <button class="action-btn" :class="distributor.status == 0 ? 'enable-btn' : 'disable-btn'"
          @click="handleToggleStatus" :title="distributor.status == 0 ? '启用分销商' : '禁用分销商'">
          <i :class="distributor.status == 0 ? 'fas fa-play' : 'fas fa-ban'"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

// 定义分销商数据类型
interface Distributor {
  id: string;
  name: string;
  avatar: string;
  commissionRate: number;
  totalSales: number;
  totalOrders: number;
  totalCommission: number;
  joinDate: string;
  status: 'active' | 'inactive' | 'pending';
}

// 定义props
interface Props {
  distributor: Distributor;
}

const props = defineProps<Props>();

// 定义事件
const emit = defineEmits<{
  (e: 'view', distributor: Distributor): void
  (e: 'edit', distributor: Distributor): void
  (e: 'toggle-status', distributor: Distributor): void
}>();

// 格式化金额
const formatMoney = (value: number): string => {
  if (!value) return '¥0'
  return '¥' + value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};

// 根据状态计算CSS类
const statusClass = computed(() => {
  switch (props.distributor.status) {
    case 'active':
      return 'status-active';
    case 'pending':
      return 'status-pending';
    case 'inactive':
      return 'status-inactive';
    default:
      return '';
  }
});

// 状态文本提示
const statusTitle = computed(() => {
  switch (props.distributor.status) {
    case 'active':
      return '活跃';
    case 'pending':
      return '待审核';
    case 'inactive':
      return '已禁用';
    default:
      return '';
  }
});

// 处理查看详情
const handleView = () => {
  emit('view', props.distributor);
};

// 处理编辑
const handleEdit = () => {
  emit('edit', props.distributor);
};

// 处理启用/禁用
const handleToggleStatus = () => {
  emit('toggle-status', props.distributor);
};
</script>

<style lang="scss" scoped>
.distributor-card {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.7);

  &:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
  }

  &.inactive {
    opacity: 0.75;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background-color: #94a3b8;
    }
  }

  &__header {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
  }

  &__avatar {
    position: relative;
    flex-shrink: 0;

    img {
      width: 64px;
      height: 64px;
      border-radius: 12px;
      object-fit: cover;
      border: 2px solid #f1f5f9;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .status-badge {
      position: absolute;
      bottom: -4px;
      right: -4px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid #fff;

      &.status-active {
        background-color: #10b981;
      }

      &.status-pending {
        background-color: #f59e0b;
      }

      &.status-inactive {
        background-color: #ef4444;
      }
    }
  }

  &__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  &__name {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__id {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 6px;
  }

  .commission-rate {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #3b82f6;
    font-weight: 500;
    padding: 4px 8px;
    background-color: rgba(59, 130, 246, 0.08);
    border-radius: 6px;
    width: fit-content;

    i {
      font-size: 11px;
    }
  }

  &__metrics {
    display: flex;
    margin-bottom: 20px;
    background-color: #f8fafc;
    border-radius: 12px;
    overflow: hidden;

    .metric {
      flex: 1;
      padding: 12px;
      text-align: center;
      position: relative;

      &:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background-color: rgba(203, 213, 225, 0.5);
      }

      &__label {
        font-size: 12px;
        color: #64748b;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &__value {
        font-size: 16px;
        font-weight: 600;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  &__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;

    .join-date {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: #64748b;

      i {
        color: #94a3b8;
      }
    }
  }

  &__actions {
    display: flex;
    gap: 8px;

    .action-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
      background-color: transparent;
      color: #64748b;

      &:hover {
        background-color: #f1f5f9;
      }

      &.view-btn:hover {
        color: #3b82f6;
      }

      &.edit-btn:hover {
        color: #10b981;
      }

      &.enable-btn:hover {
        color: #10b981;
      }

      &.disable-btn:hover {
        color: #ef4444;
      }
    }
  }
}

@media (max-width: 768px) {
  .distributor-card {
    padding: 16px;

    &__header {
      gap: 12px;
      margin-bottom: 16px;
    }

    &__metrics {
      margin-bottom: 16px;
    }

    &__footer {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;

      .join-date {
        margin-bottom: 4px;
      }

      .distributor-card__actions {
        width: 100%;
        justify-content: flex-end;
      }
    }
  }
}
</style>
